<template>
	<view>
		<view class="card-box" v-for="(item, index) in info"  :key="index"  >
			<view class="card-content" @click="checkDetail(item)">
				<image :src="item.imgurl" mode="aspectFit"></image>
				<view class="card-message" >
					<view class="card" v-for="it in item.msg" :key="it.key">
						<text class="card-title">
							{{it.key}}: 
						</text>
							{{it.value}}
					</view>
				</view>
			</view>
		</view>
		<DetailTip :info="showDetailinfo" v-if="showDetailTip" @closeDetail="closeDetail"></DetailTip>
	</view>
</template>

<script setup lang="ts">
import DetailTip from "../../components/Tip/tip.vue"
import { ref } from "vue";

	const props = defineProps(['info']);

	const showDetailinfo = ref("");
	const showDetailTip = ref(false);

	function checkDetail(item: any) {
		console.log(item);
		if(item?.content!="" || item?.bigimg!="") {		
			let myInfo = encodeURIComponent(JSON.stringify(item))
			
			uni.navigateTo({
				url: "../../pages/common/detail?info="+myInfo,
				fail: (e) => {
					console.log(e)
				},
				success: (e) => {
					console.log(e);
				}
			})
		} else {
			console.log(item.msg)
			showDetailinfo.value = item;
			showDetailTip.value = true
		}
	}
	function closeDetail() {
			showDetailTip.value = false;
			showDetailinfo.value = "";
	}
</script>

<style lang="scss" scoped>
	.card-box {
		box-sizing: border-box;
		width: 100%;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		
		.card-content {

			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 230rpx;
			width: 90%;
			border: 5rpx solid #3580b2;
			margin: 10rpx auto;
			padding: 0 20rpx;


			image {
				width: 200rpx;
				height: 200rpx;
			}

			.card {
				display: -webkit-box;

				overflow: hidden;
				white-space: normal !important;
				text-overflow: ellipsis;
				word-wrap: break-word;
				-webkit-line-clamp: 3;

				-webkit-box-orient: vertical;
				color: #333333;
				font-size: 22rpx;
			}
			.card-title {
				
				color: #336699;
				white-space: nowrap;
				padding-right: 20rpx;
				font-size: 24rpx;
			}

			.card-message {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 200rpx;
				width: 400rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>
